<template>
  <div class="wrap">
    <div class="box">
      <div class="login">
        <div class="tit"><h1>注册</h1></div>
        <div class="aa">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model.trim="form.name"></el-input>
            </el-form-item>

            <el-form-item label="密码">
              <el-input
                placeholder="请输入密码"
                v-model.trim="form.password"
                show-password
              ></el-input>
            </el-form-item>

            <el-form-item label="确认密码">
              <el-input
                placeholder="请输入密码"
                v-model.trim="form.Confirm_Password"
                show-password
              ></el-input>
            </el-form-item>
            <div class="btn_change">
              <el-button type="primary" :plain="true" @click="zhuce"
                >注册</el-button
              >
              <el-button type="primary" @click="empty">重置</el-button>
              <el-button type="primary" @click="gologin"
                >有账号，去登陆</el-button
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../api/request";
import { Message } from "element-ui";
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
        Confirm_Password: "",
      },
    };
  },

  methods: {
    gologin() {
      this.$router.push({
        name: "login",
      });
      console.log("跳转成功");
    },
    // 获取输入后的用户名和密码
    async zhuce() {
      console.log("测试注册按钮");
      console.log(
        this.form.name,
        this.form.password,
        this.form.Confirm_Password
      );
      if (this.form.password === this.form.Confirm_Password) {
        // 判断表单里的密码和确认密码里的值一样就会发送Ajax请求
        console.log("发送ajax请求");
        let result = await request({
          method: "post",
          url: "/register",
          arg: {
            user_name: this.form.name,
            password: this.form.password,
          },
          headerType: "form",
        });
        this.$router;
        console.log(result);
        // 如果返回的result里的data等于注册成功，那么就跳转home页
        if (result.data == "注册成功！！") {
          Message({
            type: "success",
            message: "注册成功",
          });
          this.$router.push({
            // 跳转登录页
            name: "login",
          });
          console.log("跳转成功");
          // 如果用户名已经存在，就提示重新注册
        } else {
          // 如果返回的result里的data不是注册成功，那么就提示
          // console.log("----格式不正确----");
          Message({
            type: "error",
            message: "请输入长度为5-16的英文字母，数字及下划线",
          });
        }
        if (result.data == "该用户名已存在，请重新注册！！") {
          Message({
            type: "error",
            message: "该用户名已存在，请重新注册！！",
          });
        }
      } else {
        // 如果两次密码不同，重新输入
        Message({
          type: "error",
          message: "两次输入的密码不同,请重新输入",
        });
        this.form.password = "";
        this.form.Confirm_Password = "";
      }
    },
    empty() {
      console.log("重置完成！！！");
      // 点击按钮用户名 密码 确认密码框的值为空
      this.form.name = "";
      this.form.password = "";
      this.form.Confirm_Password = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-image: url("~@a/img/aa.jpg");
  background-size: 100% 100%;
}
.aa {
  background-image: url("~@a/img/bb.png");
  background-size: 100% 100%;
  border: 5px solid paleturquoise;
  width: 40%;
  height: 60%;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}
.box {
  width: 100%;
  height: 100%;
  text-align: center;
  color: red;
}
.login {
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tit {
  position: absolute;
  margin-top: -180px;
}
.btn_change {
  text-align: center;
}
</style>